<template>
	<div class="show">
		<!-- 数据展示区域 -->
		<div>
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="姓名" style="text-align: left;">
					<el-input v-model="form.name" style="width: 50%;"></el-input>
					<span v-if="flag1" style="color: red;margin-left: 10px;">姓名不能为空</span>
				</el-form-item>
				<br />
				<el-form-item label="身份证" style="text-align: left;">
					<el-input v-model="form.idCard" style="width: 50%;"></el-input>
					<span v-if="flag2" style="color: red;margin-left: 10px;">身份证号不能为空</span>
					<span v-if="flag3" style="color: red;margin-left: 10px;">身份证号格式错误</span>
				</el-form-item>
				<br />
				<el-form-item label="就诊时间">
					<el-col :span="11">
						<el-date-picker type="date" 
						placeholder="选择日期" 
						v-model="form.date1" 
						:picker-options="pickerOptions" 
						style="width: 100%;">
						</el-date-picker>
					</el-col>
					<el-select v-model="form.date2" placeholder="请选择时间段" style="float:none">
						<el-option label="8:00-9:00" value="1"></el-option>
						<el-option label="9:00-10:00" value="2"></el-option>
						<el-option label="10:00-11:00" value="3"></el-option>
						<el-option label="11:00-12:00" value="4"></el-option>
						<el-option label="13:00-14:00" value="5"></el-option>
						<el-option label="14:00-15:00" value="6"></el-option>
						<el-option label="15:00-16:00" value="7"></el-option>
						<el-option label="16:00-17:00" value="8"></el-option>
					</el-select>
				</el-form-item>
				<br />
				<el-form-item label="科室" style="width: 40%;">
					<el-select v-model="form.dept" placeholder="请选择科室" style="margin-left: 50px;width: 100%;">
						<el-option v-for="item in depts" 
						:key="item.name" 
						:label="item.name" 
						:value="item.id"
						@click.native="getValue()">
						</el-option>
					</el-select>
		 	</el-form-item>
				<br />
				<el-form-item label="医生" style="width: 40%;">
					<el-select v-model="form.doctor" placeholder="请选择医生"  style="margin-left: 50px;width: 100%;">
						<el-option v-for="item in doctors" 
						:key="item.name" 
						:label="item.name" 
						:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="float: none;"></el-form-item>
				<el-form-item style="margin-top: 8%;">
					<el-button type="primary" @click="onSubmit">立即挂号</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					idCard: '',
					date1: '',
					date2: '',
					dept: '',
					doctor: '',
				},
				depts: [],
				doctors: [{
					name:"123"
				}],
				flag1: false,
				flag2: false,
				flag3: false,
				pickerOptions: { // 限制收货时间不让选择今天以前的
				　　disabledDate(time) {
				　　　　return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
				　　}
				},
			}
		},
		methods: {
			onSubmit() {
				this.flag1=false;
				this.flag2=false;
				this.flag3=false;
				/* var date = this.form.date1.toString();
				alert(date); */
				var idCard = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (this.form.name == '') {
					this.flag1 = true;
				} else if (this.form.idCard == '') {
					this.flag2 = true;
				} else if (!idCard.test(this.form.idCard)) {
					this.flag3 = true;
				} else if(this.form.date1 == ''||this.form.date2 == '') {
					alert("请选择就诊时间");
				} else if(this.form.dept == ''||this.form.doctor == '') {
					alert("请选择就诊科室和医生");
				} else {
					var regTime = new Date();
					var clinicTime = this.timeToString(this.form.date1).substring(0,10);
					this.$axios.put("http://localhost:8080/registereds/addOffline",{
						name:this.form.name,
						idCard:this.form.idCard,
						deptId:this.form.dept,
						doctorId:this.form.doctor,
						clinicTime:clinicTime,
						timeQuantum:this.form.date2,
						regTime:this.timeToString(regTime),
						status:1,
						
					}).then((res)=>{
						alert("挂号成功");
						this.form = {...''};
					})
				}
			},
			timeToString(time){
				return (time.getFullYear()) + "-" + 
				           (time.getMonth() + 1) + "-" +
				           (time.getDate()) + " " + 
				           (time.getHours()) + ":" + 
				           (time.getMinutes()) + ":" + 
				           (time.getSeconds());
			},
			getValue() {
				this.form.doctor='';
				this.$axios.get("http://localhost:8080/dept/andDoctors/"+this.form.dept).then((res)=>{
					this.doctors=res.data.data.doctors;
				})
			}
		},
		created(){
			this.$axios.get("http://localhost:8080/admin/dept").then((res)=>{
				this.depts=res.data.data;
			})
		}
	}
</script>
<style lang="less" scoped>
	.show {
		margin: 100px;
	}

	.header {
		display: flex;

		button {
			margin-left: 20px;
		}
	}

	.wrapper {
		margin: 20px;
	}

	.el-select {
		display: inline-block;
		position: relative;
		right: 15%;
	}

	.el-form-item {
		margin-bottom: 22px;
	}

	.el-button--primary {
		width: 200px;
		height: 60px;
	}
</style>
